<template>
    <!-- vant上传文件 -->
    <van-uploader v-model="fileList" @delete="onDelete" :preview-image="previewImage" :multiple="multiple"
        :max-count="maxCount" :disabled="disabled" :after-read="afterRead">
    </van-uploader>
</template>

<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            fileList: [], //文件列表
        }
    },
    props: {
        // 是否可以预览图片
        previewImage: {
            type: Boolean,
            default: true
        },
        // 上传数量
        maxCount: {
            type: Number,
            default: 9
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        // 上传之后的回调
        afterRead(e) {
            var that = this
            Toast.loading({
                duration: 0,
                message: '上传中...',
                forbidClick: true,
            });
            // 单图
            if (Object.prototype.toString.call(e) === '[object Object]') {
                let imgFile = new FormData();
                imgFile.append("fileType", 'IMAGE');
                let index = this.fileList.length <= 1 ? 0 : this.fileList.length - 1
                imgFile.append("file", this.fileList[index].file);
                // 文件上传（更改为自己的上传方式）
                uploadAction('xxxxxxxx', imgFile).then((res) => {
                    if (res.success) {
                        this.fileList[index].url = res.message
                        Toast.clear()
                        this.$emit('afterRead', this.fileList)
                    } else {
                        Toast(res.message);
                    }
                })
            } else {
                let iscloaseToast = 0
                e.forEach((el, i) => {
                    let imgFile = new FormData();
                    imgFile.append("fileType", 'IMAGE');
                    imgFile.append("file", el.file);
                    // 文件上传（更改为自己的上传方式）
                    uploadAction('xxxxxxxx', imgFile).then((res) => {
                        if (res.success) {
                            that.fileList.forEach((el2, i2) => {
                                if (el2.file) {
                                    if (el.file.name == el2.file.name) {
                                        if (!el2.url) {
                                            el2.url = res.message
                                            iscloaseToast++
                                            if (iscloaseToast == e.length) {
                                                Toast.clear()
                                            }
                                        }
                                    }
                                }

                            })
                            this.$emit('afterRead', this.fileList)
                        } else {
                            Toast(res.message);
                        }
                    })
                });
            }
        },
        // 删除图片的回调
        onDelete() {
            this.$emit('onDelete', this.fileList)
        }

    }
}
</script>

<style>
</style>